<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const router = useRouter()
const staffName = ref('')
const back = () => {
	router.push('/app/groupManagement/friendsConfig')
}
const copyToClip = (content, tipString = '复制成功') => {
	const input = document.createElement('input')
	input.setAttribute('value', content)
	document.body.appendChild(input)
	input.select()
	document.execCommand('copy')
	document.body.removeChild(input)
	ElMessage({
		message: tipString,
		type: 'success'
	})
}

const copyAddress = (address) => {
	copyToClip(address)
}
const staffList = ref([
	{
		avatar: 'https://wx.qlogo.cn/mmhead/rfxISsR8dBrWE3c6ibXZqSickjrxLiaSCXiaHNKvW1R5icBU/0',
		ext_id: 'wogizUDQAAOM1Ed_l0Z9ePIGzdE8CjbQ',
		external_user_count: 4,
		is_open: false,
		moment_address:
			'https://imxgjhfjvv.ugc.wb.miemie.la/api/moment/trace/entry?encrypt_content=CA4D9DECB34B41AC0258A086E884940C16FE7107D63888B55FD26F00D1553B81823AD5980D28CFD571D115F544877F6678A02B27285384BA248FA56528134002',
		name: '张是非'
	},
	{
		avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		ext_id: 'wogizUDQAAJs3xvzfW7pz315Jp7RCPzg',
		external_user_count: 0,
		is_open: false,
		moment_address:
			'https://imxgjhfjvv.ugc.wb.miemie.la/api/moment/trace/entry?encrypt_content=7F316973A495B2CAC20D0E4DD412E1386445DEB4D39296643C3A4126FEA8F14EBC2E1237FA5CAAD7605949BDF728985FE867881DC266BF05A37CB7B7C70017D2',
		name: '张'
	},
	{
		avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		ext_id: 'wogizUDQAAe0llz3YJ3JU2lacDrTBzSQ',
		external_user_count: 2,
		is_open: false,
		moment_address:
			'https://imxgjhfjvv.ugc.wb.miemie.la/api/moment/trace/entry?encrypt_content=6DCEEEEAC9A591A8EF7339F339D25E068710B90EDB82714C1BC63A09E3ED720FCC97042D0E3B246D524E5A80FCF5FA4004308C1325242B97E6CE30E60DB95627',
		name: '张磊'
	},
	{
		avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		ext_id: 'wogizUDQAApis1MKMliNrwKrs5MBfdxg',
		external_user_count: 0,
		is_open: false,
		moment_address:
			'https://imxgjhfjvv.ugc.wb.miemie.la/api/moment/trace/entry?encrypt_content=4A1842CA155951069A3A98A71580F907A9A7D3C04985C0904509DD7B9EA5B2BF779FED5BCC1AEE49B6FA24E5259D28B5272A55EFF4EE33086CF0CA62E108ACC9',
		name: '赵梓豪'
	},
	{
		avatar: 'https://wework.qpic.cn/wwpic/31712_Jctq9i-IR1WFL8b_1664518793/0',
		ext_id: 'wogizUDQAAweq4ADCiEpL40e-KiIi0_Q',
		external_user_count: 1,
		is_open: false,
		moment_address:
			'https://imxgjhfjvv.ugc.wb.miemie.la/api/moment/trace/entry?encrypt_content=D7D7943789DB5AF2C339EB708DF09491EBC5B466FF3868DAB712304A32EE7FECE5BE64CA47EABB2FA4E4FA11A7C0EE3CDA9928D69A7CD1B0DE1D5CBE5B80A939',
		name: '刘宏基'
	},
	{
		avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		ext_id: 'wogizUDQAA_nlgi2vQ_zHyBZvKXe6oXg',
		external_user_count: 0,
		is_open: false,
		moment_address:
			'https://imxgjhfjvv.ugc.wb.miemie.la/api/moment/trace/entry?encrypt_content=7513F87EF9F692FDE0EAC027CB182CB0FFBFC16737BFF8A4B28C86A8B2B34A11398135FF40EF79BEB27D390B590CA41702817EB220D8F7DCEEFC69A91DF263B9',
		name: '代树兴'
	}
])
</script>
<template>
	<div class="container">
		<el-scrollbar max-height="100%">
			<div class="heaeder">
				<div @click="back" class="back">
					<el-icon style="margin-right: 5px"><ArrowLeftBold /></el-icon> 朋友圈配置
				</div>
			</div>

			<div class="setMoment-text">
				<h2>获取朋友圈链接</h2>
				<div class="directions-use">
					<div class="underline-text">一、企业成员自己获取</div>
					<div class="underline">
						<div></div>
					</div>
					<div class="guide">
						成员在企业微信 <b>【移动端】</b> - <b>【工作台】</b> 找到
						<b>【企微助手】</b> ，进入朋友圈后复制朋友圈链接，填写至企业微信对外信息展示中
					</div>
					<img
						style="margin-bottom: 57px"
						src="http://www.crmuu.com/set-moment-url_setMoment1.ddc5d692dd7b.png"
					/>
					<div class="underline-text">二、管理员给成员发送链接</div>
					<div class="underline">
						<div></div>
					</div>
					<div class="guide">管理员可以复制下面的链接发送给对应的员工，由员工自行填写至企业微信对外信息展示中</div>
					<div class="align-side">
						<p>成员朋友圈状态列表</p>
						<div class="export">
							<el-input
								style="width: 196px; height: 32px; margin-right: 15px"
								v-model="staffName"
								class="w-50 m-2"
								placeholder="请输入要搜索的成员"
								:suffix-icon="Search"
							/>
							<el-button style="" type="primary">导出Excel</el-button>
						</div>
					</div>
					<el-table border :data="staffList" style="width: 100%; margin-top: 16px">
						<el-table-column>
							<template #header> 成员（{{ staffList.length }}） </template>
							<template #default="scope">
								<div class="table-avatar">
									<img :src="scope.row.avatar" alt="" />
									<span>{{ scope.row.name }}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="external_user_count" label="客户数" />
						<el-table-column prop="moment_address" label="朋友圈链接" />
						<el-table-column width="80" align="center" label="操作">
							<template #default="scope">
								<span class="copy" @click="copyAddress(scope.row.moment_address)">复制</span>
							</template>
						</el-table-column>
						<template #empty>
							<div class="table-empty">
								<img src="../../../assets/img/img/list-empty.499dbb25961c.png" alt="" />
								<p>还没有相关成员哦～</p>
							</div>
						</template>
					</el-table>
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<style lang="scss" scoped>
.container {
	height: 100vh;
	:deep(.el-input__inner) {
		font-weight: normal;
		color: #ecf5ff;
	}
	:deep(.el-table thead) {
		color: rgba(65, 66, 74, 0.85);
	}
	:deep(.el-table th.el-table__cell) {
		background-color: #fcfcfc;
	}
	:deep(.el-table--border .el-table__inner-wrapper tr td) {
		border: none;
		border-bottom: 1px solid #eee;
	}
	:deep(.el-table--border .el-table__inner-wrapper tr th) {
		border: none;
		border-bottom: 1px solid #eee;
	}
	.table-empty {
		display: -webkit-box;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		min-height: 375px;
		background-color: #fff;
	}
	.heaeder {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 48px;
		z-index: 20;
		background-color: #fff;
		padding: 15px;
		border-bottom: 1px solid #e8e8e8;
		.back {
			display: flex;
			align-items: center;
			cursor: pointer;
			color: #000000d9;
		}
	}
	.setMoment-text {
		max-width: 983px;
		margin: 24px auto 0;
		background: #fff;
		padding: 32px 130px 20px 130px;
		h2 {
			margin-bottom: 32px;
			color: rgba(0, 0, 0, 0.85);
			font-weight: 500;
			text-align: center;
			font-size: 21px;
		}
		.directions-use {
			max-width: 100%;
			.table-avatar {
				display: flex;
				align-items: flex-start;
				font-size: 13px;
				color: #333;
				img {
					width: 36px;
					height: 36px;
					margin-right: 15px;
				}
			}
			.copy {
				color: #1890ff;
				cursor: pointer;
				font-size: 13px;
			}
			.underline {
				width: 100%;
				height: 3px;
				border-bottom: 1px solid #eee;
				margin-bottom: 16px;
				div {
					width: 62px;
					height: 3px;
					background: #1890ff;
				}
			}
			.align-side {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0;
				font-size: 14px;
				font-weight: 600;
				color: rgba(18, 18, 22, 0.85);
				.export {
					// width: 80%;
				}
			}
			.underline-text {
				max-width: 100%;
				font-size: 18px;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.85);
				padding-bottom: 12px;
			}
		}
	}
	.guide {
		position: relative;
		margin: 16px 0;
		max-width: 946px;
		width: 100%;
		background: #f0f8ff;
		padding: 12px 28px 12px 34px;
		font-size: 14px;
		font-weight: 400;
		border-radius: 4px;
		color: rgba(0, 0, 0, 0.85);
		line-height: 20px;
		a {
			text-decoration: none;
			color: #1890ff;
		}
	}
	.guide:before {
		position: absolute;
		width: 6px;
		height: 6px;
		border-radius: 100%;
		background: #1890ff;
		content: '';
		display: block;
		left: 17px;
		top: 22px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}
</style>
